<script setup lang="ts">
import { computed, Ref, ref, watch } from "vue";
import { useVModel } from "@vueuse/core";
import FormViewSelect from "@/components/FormViewSelect.vue";

const props = defineProps<{
  pickerList?: { name: string; disName: string }[];
  modelValue?: any;
}>();

const emits = defineEmits<{
  (e: "update:modelValue", value: any): void;
}>();

const selfPickerList = useVModel(props, "pickerList", emits) as Ref<
  { name: string; disName: string }[]
>;

const selfValue = useVModel(props, "modelValue", emits);

const showPicker = ref(false);
const pickerIndex = ref([0]);
watch(pickerIndex, () => {
  selfValue.value = selfPickerList.value[pickerIndex.value[0]]?.name;
});
const pickerStr = computed(() => {
  if (!selfValue.value) {
    return "";
  }
  return selfPickerList.value[pickerIndex.value[0]]?.disName || "";
});
</script>

<template>
  <FormViewSelect
    @click="showPicker = !showPicker"
    :text="pickerStr"
  ></FormViewSelect>
  <tm-picker
    :columns="selfPickerList"
    v-model:model-str="pickerStr"
    v-model:show="showPicker"
    :default-value="pickerIndex"
    v-model="pickerIndex"
    mapKey="disName"
  ></tm-picker>
</template>

<style scoped></style>
